<template>
  <view class="plus-member-container planet-bg">
    <!-- 星空背景 -->
    <view class="stars">
      <view v-for="star in stars" :key="star.id" class="star" :style="star.style"></view>
    </view>
    
    <!-- 返回按钮和标题 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">◀</text>
      </view>
      <text class="header-title">尊享会员</text>
      <view class="header-right">
        <view class="vip-badge">VIP</view>
      </view>
    </view>
    
    <!-- 会员卡片 -->
    <view class="member-card">
      <!-- 皇冠装饰 -->
      <view class="coronation">
        <view class="coronation-bg"></view>
        <view class="hexagon-container">
          <view class="hexagon">
            <text class="hexagon-crown">👑</text>
          </view>
        </view>
        <view class="coronation-rays"></view>
      </view>
      
      <text class="member-title">尊享会员特权</text>
      
      <!-- 权益展示 -->
      <view class="benefits-section">
        <!-- 闪光边框 -->
        <view class="shimmer-border"></view>
        
        <view class="points-info">
          <view class="diamond-animation">
            <text class="points-title">总计可获得360</text>
            <text class="diamond-icon">💎</text>
          </view>
          <view class="points-details">
            <text class="points-detail">开通立得70</text>
            <text class="points-detail">30天内每天可领10</text>
          </view>
        </view>
        
        <!-- 权益列表 -->
        <view class="benefits-list">
          <view class="benefit-item">
            <text class="benefit-icon">✨</text>
            <text class="benefit-text">免广告加好友</text>
            <text class="benefit-value">无限次</text>
          </view>
          <view class="benefit-item">
            <text class="benefit-icon">🔮</text>
            <text class="benefit-text">匹配次数</text>
            <text class="benefit-value">无限次</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 会员套餐选择 -->
    <view class="packages-section">
      <view class="section-divider">
        <text>会员套餐</text>
      </view>
      <view class="packages-grid">
        <view class="package-item" @tap="selectPackage('3天')">
          <text class="package-price">¥4.99</text>
          <text class="package-period">3天体验</text>
          <text class="package-daily">¥1.66/天</text>
        </view>
        
        <view class="package-item recommended" @tap="selectPackage('30天')">
          <view class="recommended-tag">最受欢迎</view>
          <text class="package-price">¥11.99</text>
          <text class="package-period">30天尊享</text>
          <text class="package-daily">¥0.40/天</text>
          <view class="recommended-shine"></view>
        </view>
        
        <view class="package-item" @tap="selectPackage('90天')">
          <text class="package-price">¥21.99</text>
          <text class="package-period">90天超值</text>
          <text class="package-daily">¥0.24/天</text>
        </view>
      </view>
    </view>
    
    <!-- 立即开通按钮 -->
    <view class="action-section">
      <button class="subscribe-btn" @tap="subscribeMember">
        <text class="btn-text">立即开通</text>
        <text class="btn-subtext">尊享30天会员特权</text>
      </button>
      
      <!-- 保障信息 -->
      <view class="guarantees">
        <view class="guarantee-item">
          <text class="check-icon">✓</text>
          <text class="guarantee-text">安全支付</text>
        </view>
        <view class="guarantee-item">
          <text class="check-icon">✓</text>
          <text class="guarantee-text">不自动续费</text>
        </view>
        <view class="guarantee-item">
          <text class="check-icon">✓</text>
          <text class="guarantee-text">权益保障</text>
        </view>
      </view>
      
      <!-- 协议提示 -->
      <text class="agreement-text">点击开通即同意《会员服务协议》</text>
    </view>
    
    <!-- 权益保障和规则按钮 -->
    <view class="top-right-buttons">
      <text class="rule-button">权益详情</text>
      <text class="divider">|</text>
      <text class="rule-button">服务条款</text>
    </view>
  </view>
</template>

<script>
  import { showToast } from '../../src/common/tools';
  import { purchaseMembership } from '../../src/api/plus-member/plusMemberApi';
  
  export default {
    data() {
      return {
        stars: [], // 存储星星数据
        selectedPackage: '30天'
      };
    },
    onLoad() {
      // 初始化星空背景
      this.initStars();
      // 添加入场动画
      this.addEntranceAnimation();
    },
    methods: {
      // 初始化星空背景
      initStars() {
        const starCount = 150;
        const tempStars = [];
        
        for (let i = 0; i < starCount; i++) {
          // 随机位置
          const x = Math.random() * 100;
          const y = Math.random() * 100;
          
          // 随机动画时长
          const duration = 2 + Math.random() * 3;
          
          // 随机大小
          const size = 1 + Math.random() * 3;
          
          // 随机透明度
          const opacity = 0.3 + Math.random() * 0.7;
          
          tempStars.push({
            id: `star-${i}`,
            style: {
              left: `${x}%`,
              top: `${y}%`,
              width: `${size}rpx`,
              height: `${size}rpx`,
              opacity: opacity,
              '--duration': `${duration}s`
            }
          });
        }
        
        this.stars = tempStars;
      },
      
      // 添加入场动画
      addEntranceAnimation() {
        // 这里可以添加入场动画逻辑
        setTimeout(() => {
          const card = document.querySelector('.member-card');
          if (card) {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
          }
        }, 100);
      },
      
      // 选择套餐
      selectPackage(period) {
        this.selectedPackage = period;
        // 这里可以添加选择套餐的动画效果
      },
      
      // 返回上一页
      goBack() {
        uni.navigateBack();
      },
      
      // 订阅会员
      async subscribeMember() {
        // 模拟支付中
        uni.showLoading({ title: '处理中...' });
        
        try {
          // 根据选择的套餐设置购买数据
          let purchaseData = {};
          switch(this.selectedPackage) {
            case '3天':
              purchaseData = {
                memberType: 'trial',
                duration: 3,
                amount: 4.99
              };
              break;
            case '30天':
              purchaseData = {
                memberType: 'monthly',
                duration: 30,
                amount: 11.99
              };
              break;
            case '90天':
              purchaseData = {
                memberType: 'quarterly',
                duration: 90,
                amount: 21.99
              };
              break;
          }
          
          const response = await purchaseMembership(purchaseData);
          
          if (response && response.success) {
            // 保存会员信息到本地存储
            const memberInfo = {
              isMember: true,
              memberType: response.data.memberType || 'plus',
              expiryDate: response.data.expiryDate || new Date(Date.now() + purchaseData.duration * 24 * 60 * 60 * 1000).toISOString(),
              purchaseDate: response.data.startDate || new Date().toISOString()
            };
            
            // 保存会员信息
            uni.setStorageSync('memberInfo', JSON.stringify(memberInfo));
            
            // 添加到购买历史
            const purchaseHistory = JSON.parse(uni.getStorageSync('purchaseHistory') || '[]');
            purchaseHistory.push({
              id: response.data.orderId || Date.now(),
              type: 'plus_member',
              period: this.selectedPackage,
              price: response.data.amount || purchaseData.amount,
              date: new Date().toISOString()
            });
            uni.setStorageSync('purchaseHistory', JSON.stringify(purchaseHistory));
            
            showToast('会员开通成功！');
            setTimeout(() => {
              this.goBack();
            }, 1500);
          } else {
            showToast(response?.message || '开通失败，请稍后重试');
          }
        } catch (error) {
          console.error('购买会员失败', error);
          // API调用失败时，尝试模拟成功逻辑
          try {
            // 根据选择的套餐设置购买数据
            let amount = 11.99;
            switch(this.selectedPackage) {
              case '3天':
                amount = 4.99;
                break;
              case '90天':
                amount = 21.99;
                break;
            }
            
            // 保存会员信息到本地存储
            const memberInfo = {
              isMember: true,
              memberType: 'plus',
              expiryDate: new Date(Date.now() + (this.selectedPackage === '3天' ? 3 : this.selectedPackage === '90天' ? 90 : 30) * 24 * 60 * 60 * 1000).toISOString(),
              purchaseDate: new Date().toISOString()
            };
            
            uni.setStorageSync('memberInfo', JSON.stringify(memberInfo));
            
            // 添加到购买历史
            const purchaseHistory = JSON.parse(uni.getStorageSync('purchaseHistory') || '[]');
            purchaseHistory.push({
              id: Date.now(),
              type: 'plus_member',
              period: this.selectedPackage,
              price: amount,
              date: new Date().toISOString()
            });
            uni.setStorageSync('purchaseHistory', JSON.stringify(purchaseHistory));
            
            showToast('会员开通成功！');
            setTimeout(() => {
              this.goBack();
            }, 1500);
          } catch (storageError) {
            console.error('保存会员信息失败', storageError);
            showToast('开通失败，请稍后重试');
          }
        } finally {
          uni.hideLoading();
        }
      }
    }
  };
</script>

<style scoped>
  @import '../../src/style/global.scss';
  
  .plus-member-container {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    color: #E0E0E0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  /* 星空背景样式保持与global.scss一致，不需要重复定义 */
  
  /* 头部样式 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 30rpx 30rpx;
    position: relative;
    z-index: 10;
  }
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }
  
  .back-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
  }
  
  .back-icon {
    font-size: 40rpx;
  }
  
  .header-title {
    font-size: 42rpx;
    font-weight: bold;
    letter-spacing: 4rpx;
    text-shadow: 0 2rpx 10rpx rgba(255, 215, 0, 0.5);
  }
  
  .header-right {
    width: 60rpx;
    display: flex;
    justify-content: flex-end;
  }
  
  /* VIP徽章 */
  .vip-badge {
    padding: 8rpx 16rpx;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 40rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: 2rpx;
    box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.5);
  }
  
  /* 右上角按钮 */
  .top-right-buttons {
    position: absolute;
    top: 140rpx;
    right: 40rpx;
    display: flex;
    align-items: center;
    z-index: 10;
  }
  
  .rule-button {
    font-size: 24rpx;
    color: #FFFFFF;
    opacity: 0.9;
    transition: all 0.3s ease;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
  }
  
  .rule-button:active {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .divider {
    margin: 0 10rpx;
    opacity: 0.5;
  }
  
  /* 会员卡片样式 */
  .member-card {
    padding: 40rpx 40rpx 60rpx;
    text-align: center;
    position: relative;
    z-index: 5;
    opacity: 0;
    transform: translateY(50rpx);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  /* 皇冠加冕效果 */
  .coronation {
    position: relative;
    width: 260rpx;
    height: 260rpx;
    margin: 0 auto 30rpx;
  }
  
  .coronation-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240rpx;
    height: 240rpx;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0) 70%);
    border-radius: 50%;
    animation: coronationPulse 4s ease-in-out infinite;
  }
  
  .coronation-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260rpx;
    height: 260rpx;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='rays' cx='50' cy='50' r='50' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='70%25' stop-color='%23FFD700' stop-opacity='0.6'/%3E%3Cstop offset='75%25' stop-color='%23FFD700' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23rays)'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    animation: rotate 20s linear infinite;
  }
  
  @keyframes coronationPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
  }
  
  @keyframes rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }
  
  /* 六边形皇冠图标 */
  .hexagon-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180rpx;
    height: 180rpx;
    z-index: 2;
  }
  
  .hexagon {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.6), 0 0 80rpx rgba(255, 215, 0, 0.3);
    animation: float 3s ease-in-out infinite;
  }
  
  .hexagon-crown {
    font-size: 90rpx;
    filter: drop-shadow(0 0 10rpx rgba(255, 255, 255, 0.8));
  }
  
  .member-title {
    font-size: 42rpx;
    font-weight: bold;
    margin-bottom: 50rpx;
    display: block;
    letter-spacing: 6rpx;
    text-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);
  }
  
  /* 权益展示区域 */
  .benefits-section {
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 30rpx;
    padding: 40rpx;
    position: relative;
    backdrop-filter: blur(10px);
    border: 1rpx solid rgba(255, 255, 255, 0.05);
    z-index: 1;
  }
  
  /* 闪光边框 */
  .shimmer-border {
    position: absolute;
    top: -2rpx;
    left: -2rpx;
    right: -2rpx;
    bottom: -2rpx;
    border-radius: 32rpx;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
    z-index: -1;
  }
  
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  
  .points-info {
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  /* 钻石动画 */
  .diamond-animation {
    display: flex;
    align-items: center;
    animation: diamondGlow 2s ease-in-out infinite alternate;
  }
  
  @keyframes diamondGlow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.3); }
  }
  
  .points-title {
    font-size: 40rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 30rpx;
    letter-spacing: 2rpx;
  }
  
  .diamond-icon {
    font-size: 44rpx;
    margin-left: 15rpx;
    animation: diamondFloat 1.5s ease-in-out infinite;
  }
  
  @keyframes diamondFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10rpx) rotate(5deg); }
  }
  
  .points-details {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 20rpx;
  }
  
  .points-detail {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
    padding: 15rpx 30rpx;
    border-radius: 40rpx;
    border: 1rpx solid rgba(255, 215, 0, 0.3);
  }
  
  /* 权益列表 */
  .benefits-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25rpx;
  }
  
  .benefit-item {
    padding: 40rpx 30rpx;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 24rpx;
    text-align: center;
    transition: all 0.3s ease;
    border: 1rpx solid rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
  }
  
  .benefit-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transition: all 0.5s ease;
  }
  
  .benefit-item:active::before {
    left: 100%;
  }
  
  .benefit-icon {
    font-size: 56rpx;
    margin-bottom: 20rpx;
    display: block;
    animation: iconFloat 3s ease-in-out infinite;
  }
  
  @keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15rpx); }
  }
  
  .benefit-text {
    font-size: 32rpx;
    display: block;
    margin-bottom: 15rpx;
    letter-spacing: 1rpx;
  }
  
  .benefit-value {
    font-size: 30rpx;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 0 10rpx rgba(255, 215, 0, 0.5);
  }
  
  /* 套餐选择区域 */
  .packages-section {
    padding: 0 40rpx 50rpx;
    position: relative;
    z-index: 4;
  }
  
  .section-divider {
    text-align: center;
    margin: 50rpx 0;
    position: relative;
  }
  
  .section-divider::before,
  .section-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 2rpx;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 215, 0, 0.6) 100%);
  }
  
  .section-divider::before {
    left: 0;
  }
  
  .section-divider::after {
    right: 0;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  }
  
  .section-divider text {
    font-size: 32rpx;
    font-weight: bold;
    letter-spacing: 4rpx;
    padding: 0 30rpx;
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .recommended-tag {
    position: absolute;
    top: -25rpx;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #FFD700, #FFA500);
    padding: 8rpx 24rpx;
    border-radius: 40rpx;
    font-size: 24rpx;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);
  }
  
  .packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }
  
  .package-item {
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 24rpx;
    padding: 40rpx 20rpx;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 2rpx solid transparent;
    position: relative;
    backdrop-filter: blur(10px);
    overflow: hidden;
  }
  
  .package-item:active {
    transform: scale(0.98);
    background-color: rgba(255, 255, 255, 0.12);
  }
  
  .package-item.recommended {
    background-color: rgba(255, 215, 0, 0.15);
    border-color: #FFD700;
    box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.25);
    transform: scale(1.05) translateY(-10rpx);
    z-index: 1;
  }
  
  .recommended-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    animation: shine 3s infinite;
  }
  
  @keyframes shine {
    0% { left: -100%; }
    20%, 100% { left: 100%; }
  }
  
  .package-price {
    font-size: 42rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 15rpx;
    color: #FFD700;
    text-shadow: 0 0 15rpx rgba(255, 215, 0, 0.5);
  }
  
  .package-period {
    font-size: 30rpx;
    margin-bottom: 15rpx;
    display: block;
    letter-spacing: 1rpx;
  }
  
  .package-daily {
    font-size: 26rpx;
    opacity: 0.8;
  }
  
  /* 操作区域 */
  .action-section {
    padding: 0 40rpx 80rpx;
    position: relative;
    z-index: 3;
    margin-top: auto;
  }
  
  .subscribe-btn {
    width: 100%;
    padding: 35rpx 30rpx;
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
    color: #FFFFFF;
    border-radius: 60rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none;
  }
  
  .subscribe-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s ease;
  }
  
  .subscribe-btn:active {
    transform: scale(0.98);
  }
  
  .subscribe-btn:active::before {
    left: 100%;
  }
  
  .btn-text {
    font-size: 40rpx;
    font-weight: bold;
    display: block;
    color: #FFFFFF;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    letter-spacing: 6rpx;
  }
  
  .btn-subtext {
    font-size: 24rpx;
    margin-top: 8rpx;
    display: block;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0.9;
  }
  
  /* 保障信息 */
  .guarantees {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;
  }
  
  .guarantee-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20rpx;
    border-radius: 20rpx;
    transition: all 0.3s ease;
  }
  
  .guarantee-item:active {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .check-icon {
    font-size: 36rpx;
    color: #4CAF50;
    margin-bottom: 15rpx;
    background: rgba(76, 175, 80, 0.1);
    padding: 10rpx;
    border-radius: 50%;
  }
  
  .guarantee-text {
    font-size: 28rpx;
    opacity: 0.9;
  }
  
  /* 协议提示 */
  .agreement-text {
    font-size: 26rpx;
    opacity: 0.7;
    text-align: center;
    display: block;
    padding: 0 40rpx;
  }
  
  /* 浮动动画 */
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20rpx); }
  }
</style>